<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

	<head>
		<meta charset="utf-8">
		<title>OrderAdmin</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				display: table-cell;
				padding: 0 20px;
				border: 0;
				width: 1%;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: 2px solid #007aff;
				line-height: 20px;
			}
			
			.space5 {
				margin-left: 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title">订单处理中心</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							待处理 <span id="pendingQty" class="mui-badge mui-badge-danger" style="padding-left: 5px;visibility:hidden"></span>
						</a>
						<a class="mui-control-item" href="#item2mobile">
							已处理
						</a>
						<a class="mui-control-item" href="#item3mobile">
							全部
						</a>

					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">

								</ul>
							</div>
						</div>
					</div>

					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">									 
									 
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">

								</ul>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./js/mui.pullToRefresh.js"></script>
		<script src="./js/mui.pullToRefresh.material.js"></script>
		<script>
			function formatTime(time) {
				var date = new Date(parseInt(time));
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()

				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()

				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
			}

			function formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			}

			var svrUrl = 'https://gzmsbweb.gcn99.com/diancan/';

			mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				$.ready(function() {

					mui.ajax({
						url: svrUrl + 'orders',
						type: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						timeout: 10000,
						success: function(data) {
							var ul = document.querySelectorAll('.mui-table-view');

							var pending = ul[0];
							var done = ul[1];
							var allOrder = ul[2];

							pending.appendChild(createFragment(data.data));
							done.appendChild(createFragmentText(data.data, 2));
							allOrder.appendChild(createFragmentText(data.data));

							mui('.mui-content .mui-switch').each(function() {
								mui(this).switch();
								this.addEventListener('toggle', function(event) {
									var id = this.parentNode.querySelector('div').getAttribute("dataId");
									if(event.detail.isActive) {
										mui.ajax({
											url: svrUrl + 'orderState/' + id + "/2",
											type: 'get',
											headers: {
												'Content-Type': 'application/json'
											},
											timeout: 10000,
											success: function(data) {
												mui.toast("出单成功！");
											},
											error: function(xhr, type, errorThrown) {}
										});
									}
								});

							});

							if(document.querySelectorAll('.mui-switch').length > 0) {
								document.getElementById("pendingQty").innerHTML = document.querySelectorAll('.mui-switch').length;
								document.getElementById("pendingQty").style.visibility = 'visible'
							} else {
								document.getElementById("pendingQty").style.visibility = 'hidden'
							}

						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							console.log(type);
							console.log(errorThrown);
						}
					});

					var createFragment = function(data) {
						var fragment = document.createDocumentFragment();
						var li;
						$.each(data, function(idx, item) {
							if(item.status == 1) {
								li = document.createElement('li');
								li.className = 'mui-table-view-cell mui-media';
								li.innerHTML = '<img class="mui-media-object mui-pull-left" src="' + svrUrl + 'img/' + item.imgUrl + '"><div class="mui-media-body" dataId="' + item.orderId + '">' + item.goodsName + '<span class="mui-badge mui-badge-purple space5"><em>¥</em>' + item.amount + '  ' + item.qty + '杯</span><p class="mui-ellipsis"><span class="mui-badge mui-badge-primary">' + item.userName + '</span><span class="mui-badge mui-badge-inverted space5">' + formatTime(item.addTime) + '</span></p></div><span></span><div class="mui-switch mui-pull-right"><div class="mui-switch-handle"></div></div>';
								fragment.appendChild(li);
							}
						});

						return fragment;
					};

					var createFragmentText = function(data, type) {
						var fragment = document.createDocumentFragment();
						var li;
						$.each(data, function(idx, item) {
							if(item.status != null && item.status == 2) {
								li = document.createElement('li');
								li.className = 'mui-table-view-cell mui-media';
								li.innerHTML = '<span class="mui-pull-right" style="line-height: 35px;color:#007aff">已完成</span><img class="mui-media-object mui-pull-left" src="' + svrUrl + 'img/' + item.imgUrl + '"><div class="mui-media-body">' + item.goodsName + '<span class="mui-badge mui-badge-purple space5"><em>¥</em>' + item.amount + '  ' + item.qty + '杯</span><p class="mui-ellipsis"><span class="mui-badge mui-badge-primary">' + item.userName + '</span><span class="mui-badge mui-badge-inverted space5">' + formatTime(item.addTime) + '</span></p></div>';
								fragment.appendChild(li);
							} else if(type==null){
								li = document.createElement('li');
								li.className = 'mui-table-view-cell mui-media';
								li.innerHTML = '<img class="mui-media-object mui-pull-left" src="' + svrUrl + 'img/' + item.imgUrl + '"><div class="mui-media-body">' + item.goodsName + '<span class="mui-badge mui-badge-purple space5"><em>¥</em>' + item.amount + '  ' + item.qty + '杯</span><p class="mui-ellipsis"><span class="mui-badge mui-badge-primary">' + item.userName + '</span><span class="mui-badge mui-badge-inverted space5">' + formatTime(item.addTime) + '</span></p></div>';
								fragment.appendChild(li);
							}

						});

						return fragment;
					};

					var createFragment2 = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for(var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
							li.innerHTML = '<img class="mui-media-object mui-pull-left" src="./images/yuantiao.jpg"><div class="mui-media-body">CBD <span class="mui-badge mui-badge-purple">456</span><p class="mui-ellipsis"><span class="mui-badge mui-badge-inverted">2018-05-03 12:02</span></p></div><span></span><div class="mui-switch mui-pull-right"><div class="mui-switch-handle"></div></div>';
							fragment.appendChild(li);
						}

						mui('.mui-content .mui-switch').each(function() { //循环所有toggle
							//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
							//this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
							/**
							 * toggle 事件监听
							 */
							mui(this).switch();
							this.addEventListener('toggle', function(event) {
								//event.detail.isActive 可直接获取当前状态
								//this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
								console.info('状态：' + event.detail.isActive ? 'true' : 'false');

							});

						});

						return fragment;
					};
				});
			})(mui);
		</script>
	</body>

</html>